<template>
  <div class="new-songs">
	 <el-tabs v-model="activeName" @tab-click="handleClick">
	    <el-tab-pane label="全部" name="0">
			<song-list :songsList="topList" newsongs></song-list>
		</el-tab-pane>
	    <el-tab-pane label="华语" name="7">
			<song-list :songsList="topList" newsongs></song-list>
		</el-tab-pane>
	    <el-tab-pane label="欧美" name="96">
			<song-list :songsList="topList" newsongs></song-list>
		</el-tab-pane>
	    <el-tab-pane label="韩国" name="8">
			<song-list :songsList="topList" newsongs></song-list>
		</el-tab-pane>
	    <el-tab-pane label="日本" name="16">
			<song-list :songsList="topList" newsongs></song-list>
		</el-tab-pane>
	  </el-tabs>
  </div>
</template>

<script>
import {_getTopSong} from 'network/newsong.js';
import { _getSongsDetail, songDetail } from "network/detail";
import SongList from 'components/common/song-list/song-list.vue';

export default {
  name:'NewSongs',
  components:{SongList},
  data(){
    return{
      activeName:0,
	  paramsTop:{
		  type:0
	  },
	  topList:[],
	 
    }
  },
  created(){
	this.getList()  
  },
  methods:{
	getList(){
		  this.topList = [];
		  _getTopSong(this.paramsTop).then(res=>{
			  let topList=res.data.data
			  for(let i in topList) {
				  _getSongsDetail(topList[i].id).then(res=>{
					  let song = new songDetail(res.data.songs);
					  this.topList.push(song);
				  })
			  }
		  })
	},
    handleClick(tab, event){
		this.paramsTop.type=tab.name
		this.getList()
		
   }
  }
}
</script>

<style lang="less" scoped>
.new-songs{
	padding: 20px 70px;
}
</style>